<template>
  <el-container class="setting">
    <el-menu default-active="enterprise" :router="true" class="menu">
      <el-menu-item index="enterprise">
        <template slot="title">
          <span slot="title">企业账户</span>
        </template>
      </el-menu-item>
      <el-menu-item index="bank">
        <template slot="title">
          <span slot="title">合作银行</span>
        </template>
      </el-menu-item>
      <el-menu-item index="credit">
        <template slot="title">
          <span slot="title">授信企业</span>
        </template>
      </el-menu-item>
      <el-menu-item index="sensitive">
        <template slot="title">
          <span slot="title">敏感行业</span>
        </template>
      </el-menu-item>
      <el-menu-item index="intercept">
        <template slot="title">
          <span slot="title">风控拦截</span>
        </template>
      </el-menu-item>
      <el-menu-item index="black">
        <template slot="title">
          <span slot="title">黑名单</span>
        </template>
      </el-menu-item>
    </el-menu>
    <router-view class="setting-container"></router-view>
  </el-container>
</template>
<script>
export default {
  computed: {
    activeRoute() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    // console.log();
  }
};
</script>
<style lang="scss" scoped>
.setting {
  overflow: hidden;

  /deep/.el-menu-item {
    width: 140px;

    background: #f5f5f5;
    &.is-active {
      background: rgba(0, 0, 0, 0.1);
      border-left: 5px solid #a3a0fb;
    }
    // &:focus,&:hover
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    outline: 0;
  }

  &-container {
    padding: 20px;
  }
}
</style>